import React from 'react';
import { useTranslation } from 'react-i18next';
import { getDynamicFonts } from '@/utils/fontUtils';
import dangerous from '@/assets/images/setting/dangerous.png';
import { motion, AnimatePresence } from 'framer-motion';
import './ReleasePopUp.css';

/**
 * 确认弹窗组件接口定义
 * @interface ConfirmModalProps
 * @property {boolean} isOpen - 控制弹窗是否显示
 * @property {() => void} onClose - 关闭弹窗的回调函数
 * @property {() => void} onConfirm - 确认操作的回调函数
 * @property {string} title - 弹窗标题
 * @property {string} message - 弹窗消息内容
 * @property {string} [confirmText] - 确认按钮文本，可选，默认使用国际化的"确认"
 * @property {string} [cancelText] - 取消按钮文本，可选，默认使用国际化的"取消"
 */
interface ReleasePopUpProps {
    isOpen: boolean;
    onClose: () => void;
    onConfirm: () => void;
    // title: string;
    // message: string;
    confirmText?: string;
    cancelText?: string;
}

const ReleasePopUp: React.FC<ReleasePopUpProps> = ({
    isOpen,
    onClose,
    onConfirm,
    // title,
    // message,
    confirmText,
    cancelText
}) => {
    const { t, i18n } = useTranslation();
    const dynamicFonts = getDynamicFonts(i18n);

    // 阻止点击事件冒泡，防止点击弹窗内容时关闭弹窗
    const stopPropagation = (e: React.MouseEvent) => {
        e.stopPropagation();
    };

    // 动画变体配置
    const backdropVariants = {
        hidden: { opacity: 0 },
        visible: { opacity: 1 }
    };

    const modalVariants = {
        hidden: {
            opacity: 0,
            scale: 0.8,
            y: -50
        },
        visible: {
            opacity: 1,
            scale: 1,
            y: 0,
            transition: {
                type: "spring" as const,
                damping: 25,
                stiffness: 300
            }
        },
        exit: {
            opacity: 0,
            scale: 0.8,
            y: -50,
            transition: {
                duration: 0.2
            }
        }
    };

    return (
        <AnimatePresence>
            {isOpen && (
                <motion.div
                    className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50"
                    onClick={onClose} // 点击背景关闭弹窗
                    aria-modal="true"
                    role="dialog"
                    variants={backdropVariants}
                    initial="hidden"
                    animate="visible"
                    exit="hidden"
                    transition={{ duration: 0.3 }}
                >
                    {/* 内容盒子  */}
                    <motion.div
                        className="bg-[rgb(26,26,26)] rounded-lg p-6 max-w-md w-full mx-4 border border-[rgb(54,54,54)] content-box"
                        onClick={stopPropagation} // 防止点击内容区域时关闭弹窗
                        variants={modalVariants}
                        initial="hidden"
                        animate="visible"
                        exit="exit"
                    >
                        {/* 弹窗标题 */}
                        <motion.div
                            className='flex items-center justify-center gap-3 mb-4'
                            initial={{ opacity: 0, y: -20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.1, duration: 0.3 }}
                        >
                            {/* 图标  */}
                            <motion.img
                                src={dangerous}
                                alt="dangerous"
                                className="w-10 h-10"
                                initial={{ scale: 0, rotate: -180 }}
                                animate={{ scale: 1, rotate: 0 }}
                                transition={{ delay: 0.2, type: "spring", stiffness: 150 }}
                            />
                            <motion.h3
                                style={{ fontFamily: dynamicFonts.font4 }}
                                className="text-[1.4rem] text-white"
                                initial={{ opacity: 0, x: -20 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{ delay: 0.3, duration: 0.3 }}
                            >
                                {t('settings.cancelSubscriptionTitle')}
                            </motion.h3>
                        </motion.div>

                        {/* 弹窗消息内容 */}
                        <motion.div
                            className='mt-8'
                            style={{ fontFamily: dynamicFonts.font2 }}
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            transition={{ delay: 0.4, duration: 0.4 }}
                        >
                            <motion.p
                                className="text-gray-300 mb-4"
                                initial={{ opacity: 0, x: -30 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{ delay: 0.5, duration: 0.3 }}
                            >
                                1、{t('settings.cancelSubscriptionMessage1')}
                            </motion.p>
                            <motion.p
                                className="text-gray-300 mb-4"
                                initial={{ opacity: 0, x: -30 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{ delay: 0.6, duration: 0.3 }}
                            >
                                2、{t('settings.cancelSubscriptionMessage2')}
                            </motion.p>
                            <motion.p
                                className="text-gray-300 mb-8"
                                initial={{ opacity: 0, x: -30 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{ delay: 0.7, duration: 0.3 }}
                            >
                                3、{t('settings.cancelSubscriptionMessage3')}
                            </motion.p>
                        </motion.div>

                        {/* 按钮区域 */}
                        <motion.div
                            className="flex justify-end space-x-3"
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.8, duration: 0.3 }}
                            style={{fontFamily:dynamicFonts.font1}}
                        >
                            {/* 取消按钮 */}
                            <motion.button
                                className="px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-600 transition-colors"
                                onClick={onClose}
                                whileHover={{
                                    scale: 1.1,
                                    y: -4,
                                    boxShadow: "0 8px 16px rgba(55,65,81, 0.4)"
                                }}
                                whileTap={{ scale: 0.9 }}
                                initial={{ opacity: 0, x: 20 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{
                                    type: "spring",
                                    stiffness: 400,
                                    damping: 10
                                }}
                            >
                                {cancelText || t('common.cancel')}
                            </motion.button>

                            {/* 确认按钮 */}
                            <motion.button
                                className="px-4 py-2 bg-pink-600 text-white rounded-lg"
                                onClick={() => {
                                    onConfirm();
                                    onClose();
                                }}
                                whileHover={{
                                    scale: 1.1,
                                    y: -4,
                                    boxShadow: "0 8px 20px rgb(255,55,95,0.5)"
                                }}
                                whileTap={{ scale: 0.9 }}
                                initial={{ opacity: 0, x: 20 }}
                                animate={{ opacity: 1, x: 0 }}
                                transition={{
                                    type: "spring",
                                    stiffness: 400,
                                    damping: 10
                                }}
                            >
                                {confirmText || t('common.confirm')}
                            </motion.button>
                        </motion.div>
                    </motion.div>
                </motion.div>
            )}
        </AnimatePresence>
    );
};

export default ReleasePopUp; 